import { Input, Button , DatePicker, Table, Space,Row ,Select } from 'antd';
import { PlusOutlined,PaperClipOutlined } from '@ant-design/icons';
const { Search } = Input;
import React, { useState, useRef} from 'react';

const { Option } = Select;
import { GridContent } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { EditableProTable } from '@ant-design/pro-table';
import styles from './style.less'




const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const Personnel: React.FC = () => {
  type GithubIssueItem = {
    id: number;
    userName: string;//	用户名
    nikeName: string;//	昵称
    realName: string;//	真是姓名
    registrationTime: Date;//	注册时间
    region: string;//		地区
    remark: string;//		备注
    updateTime: Date;//修改时间
    
  };
  const tableListDataSource: GithubIssueItem[] = [];
  
  
  for (let i = 0; i < 5; i += 1) {
    tableListDataSource.push({
      id: i,
      userName:'用户'+i,
      nikeName: '昵称'+i,
      realName:'真是姓名'+i,
      registrationTime: new Date(),
      region: "中国",
      updateTime: new Date(),
      remark: '备注'+i
    });
  }
  




  
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: '用户id',
      dataIndex: 'id',
     
    },
    {
      title: '用户名',
      dataIndex: 'userName',
   
      tip: '标题过长会自动收缩',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
    },  {
      title: '昵称',
      dataIndex: 'nikeName',
     
    },
    {
      title: '真是姓名',
      dataIndex: 'realName',
    },
    {
      title: '注册时间',
      valueType: 'date',
      dataIndex: 'registrationTime',
    },
     {
      title: '地区',
   
      dataIndex: 'region',
    },
       {
      title: '备注',
      dataIndex: 'remark',
    },
     {
      title: '更新时间',
      dataIndex: 'updateTime',
      valueType: 'date'
    },
    {
      title: '操作',
      valueType: 'option',
      render: (text, record, _, action) => [
        <a
          key="editable"
          onClick={() => {
            action?.startEditable?.(record.id);
          }}
        >
          编辑
        </a>,
        <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
          查看
        </a>,
      
      ],
    },
  ];
  
  
  const onSearch = value => console.log(value);

  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [dataSource, setDataSource] = useState<GithubIssueItem[]>([]);
    

    return (
      <GridContent>
        <Row className={styles.tabletop}  >
          <div>
          <Button className={styles.addBtn}
          type="primary"  >
          <PlusOutlined />
          新增
        </Button>
        <Button className={styles.exporttBtn}
          type="primary" >
          <PaperClipOutlined />
          导出
        </Button>

          </div>
          <Search placeholder="请输入搜索内容"   size="large" onSearch={onSearch} style={{ width: 400 }} />
        </Row>
      <EditableProTable<GithubIssueItem>
        rowKey="id"
        maxLength={5}
        recordCreatorProps={ false }
       
        columns={columns}
        request={async () => ({
          data: tableListDataSource,
          total: 3,
          success: true,
        })}
        value={dataSource}
        onChange={setDataSource}
        editable={{
          type: 'multiple',
          editableKeys,
          onSave: async (rowKey, data, row) => {
            console.log(rowKey, data, row);
            await waitTime(2000);
          },
          onChange: setEditableRowKeys,
        }}
      />
      </GridContent>
    );
};

export default Personnel;